<template>
    <div class="list">
        <h4>任务列表</h4>
        <div :class="{task:true,active:item.status==false}" v-for="(item,index) in store.tasklist" :key="index">
            <input :checked="item.status" type="checkbox"  @click="change(item.id)">
            <span>{{item.id}}</span>
            <span>{{item.name}}</span>
            <span @click="del(item.id)">删除</span>
        </div>
    </div>
</template>

<script setup>
import { useTasklistStore } from '../stores/tasklist' 
var store = useTasklistStore()
var change = (id) => {
    store.change(id)
}
var del = (id) => {
    store.deleteTask(id)
}
</script>


<style scoped>
.list .task{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background-color: rgb(33, 146, 216);
  color: white;
  margin: 10px;
}
.list .active {
    background-color: palevioletred;
}
</style>